<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack"
                        :content="!dataForm.id ? '新建':'编辑'"/>
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 保 存</el-button>
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="mini" label-width="100px" label-position="top" >
        <template v-if="!loading">
          <el-col :span="24">
            <el-card class="mb-20" shadow="always" header="基本信息">
              <el-col :span="6">
                <el-form-item label="客户名称"
                              prop="customerName">
                  <el-input v-model="dataForm.customerName"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目"
                              prop="project">
                  <el-input v-model="dataForm.project"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="来源"
                              prop="customerSource">
                  <el-select v-model="dataForm.customerSource"
                             placeholder="请选择" clearable :style='{"width":"100%"}'>
                    <el-option v-for="(item, index) in customerSourceOptions" :key="index" :label="item.fullName"
                               :value="item.enCode" :disabled="item.disabled"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="min-height: 76px">
                <el-form-item label="客户类型"
                              prop="customerType">
                  <el-radio-group v-model="dataForm.customerType"
                                  size="small">
                    <el-radio v-for="(item, index) in customerTypeOptions" :key="index" :label="item.enCode"
                              :disabled="item.disabled">
                      {{ item.fullName }}
                    </el-radio>

                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="min-height: 76px">
                <el-form-item label="客户性质"
                              prop="customerNature">
                  <el-radio-group v-model="dataForm.customerNature"
                                  size="small">
                    <el-radio v-for="(item, index) in customerNatureOptions" :key="index" :label="item.enCode"
                              :disabled="item.disabled">
                      {{ item.fullName }}
                    </el-radio>

                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属行业"
                              prop="industry">
                  <el-select v-model="dataForm.industry"
                             placeholder="请选择" clearable :style='{"width":"100%"}'>
                    <el-option v-for="(item, index) in industryOptions" :key="index" :label="item.fullName"
                               :value="item.enCode" :disabled="item.disabled"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="社会信用代码/身份证"
                              prop="customerCode">
                  <el-input v-model="dataForm.customerCode"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="详细地址"
                              prop="detailedAddress">
                  <el-input v-model="dataForm.detailedAddress"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="备注"
                              prop="remark">
                  <el-input v-model="dataForm.remark"
                            placeholder="请输入" :maxlength="100" :style='{"width":"100%"}' true type="textarea"
                            :autosize='{"minRows":4,"maxRows":4}'>

                  </el-input>
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="mb-20" shadow="always" header="联系人">
              <el-col :span="6">
                <el-form-item label="联系人姓名"
                              prop="contactName">
                  <el-input v-model="dataForm.contactName"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人电话"
                              prop="contactNumber">
                  <el-input v-model="dataForm.contactNumber"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人邮箱"
                              prop="contactEmail">
                  <el-input v-model="dataForm.contactEmail"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from '@/utils/request'
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: "",
      dataForm: {
        customerName: '',
        project: '',
        customerSource: "",
        customerType: "",
        customerNature: "",
        industry: "",
        customerCode: '',
        detailedAddress: '',
        remark: '',
        contactName: '',
        contactNumber: '',
        contactEmail: '',
      },
      rules:
        {
          customerName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          project: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          customerSource: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          customerNature: [
            {
              required: true,
              message: '请至少选择一个',
              trigger: 'change'
            },
          ],
          contactEmail: [],


        },
      customerSourceOptions: [],
      customerTypeOptions: [],
      customerNatureOptions: [],
      industryOptions: [],

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getcustomerSourceOptions();
    this.getcustomerTypeOptions();
    this.getcustomerNatureOptions();
    this.getindustryOptions();
  },
  mounted() {
  },
  methods: {
    getcustomerSourceOptions() {
      getDictionaryDataSelector('610927544136368837').then(res => {
        this.customerSourceOptions = res.data.list
      })
    },
    getcustomerTypeOptions() {
      getDictionaryDataSelector('610927785631810245').then(res => {
        this.customerTypeOptions = res.data.list
      })
    },
    getcustomerNatureOptions() {
      getDictionaryDataSelector('610927785631810245').then(res => {
        this.customerNatureOptions = res.data.list
      })
    },
    getindustryOptions() {
      getDictionaryDataSelector('610927980662751941').then(res => {
        this.industryOptions = res.data.list
      })
    },
    clearData() {
      this.dataForm.customerName = '';
      this.dataForm.project = '';
      this.dataForm.customerSource = "";
      this.dataForm.customerType = "0";
      this.dataForm.customerNature = "0";
      this.dataForm.industry = "";
      this.dataForm.customerCode = '';
      this.dataForm.detailedAddress = '';
      this.dataForm.remark = '';
      this.dataForm.contactName = '';
      this.dataForm.contactNumber = '';
      this.dataForm.contactEmail = '';
    },
    goBack() {
      this.$emit('refresh')
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/zc/zcCustomer/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/zc/zcCustomer',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/zc/zcCustomer/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = {...this.tableRows[this.currVmodel], ...data[i]}
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    },
  },
}

</script>
